<template>
    <div class="dashboard-container">
        <!-- 左侧导航区 -->
        <div class="control-panel">
            <div class="logo">
                <el-icon :size="32" color="#00ff87">
                    <MagicStick />
                </el-icon>
                <h1>BALL~</h1>
            </div>

            <div class="menu-buttons">
                <button
                    v-for="btn in buttons"
                    :key="btn.id"
                    class="menu-btn"
                    :class="{ active: activeButton === btn.id }"
                    @click="handleModeChange(btn.id)"
                >
                    <el-icon :size="20">
                        <component :is="btn.icon" />
                    </el-icon>
                    <span class="label">{{ btn.label }}</span>
                    <!-- 新增红点提示 -->
                    <span v-if="btn.id === 3 && pendingRequestsCount > 0" class="badge"></span>
                </button>
            </div>

            <!-- 新增用户个人小卡片 -->
            <div class="user-profile-card" @click="router.push('/me/myself/')">
                <div class="user-avatar-container">
                    <img :src="userStore.photo" alt="用户头像" class="user-avatar" />
                    <div class="online-indicator"></div>
                </div>
                <div class="user-info">
                    <div class="username">{{ userStore.username }}</div>
                    <div class="user-rating">
                        <el-icon color="#00ff87"><Star /></el-icon>
                        <span>{{ userStore.rating }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-wrapper">
            <!-- 新增排行榜区域 -->
            <div class="ranking-section glass-card">
                <h2 class="board-title">
                    <el-icon>
                        <Trophy />
                    </el-icon>
                    实时排行榜
                </h2>
                <RankingListView />
            </div>

            <!-- 新增在线用户区域 -->
            <div class="online-users-section glass-card">
                <h2 class="board-title">
                    <el-icon>
                        <User />
                    </el-icon>
                    当前在线
                    <el-icon class="message-icon" @click="handleMessageClick">
                        <Message />
                        <span v-if="unreadMessages.length > 0" class="message-badge"></span>
                    </el-icon>
                </h2>
                <OnlineUsersView />
            </div>
        </div>
    </div>
    <!-- 添加消息弹窗 -->
    <div v-if="showMessagePopup" class="message-popup">
        <div
            v-for="(msg, index) in unreadMessages"
            :key="index"
            class="message-item"
            @click="router.push({ name: 'chat', params: { userId: msg.from } })"
        >
            <div class="message-header">
                <span class="from-name">{{ msg.fromName }}</span>
                <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
            </div>
            <div class="message-content">{{ msg.content }}</div>
        </div>
    </div>

    <!-- 添加游戏邀请通知窗口 -->
    <div v-if="showGameInvitation" class="game-invitation-popup">
        <div class="game-invitation-content">
            <div class="game-invitation-header">
                <h3>游戏邀请</h3>
                <button @click="closeGameInvitation" class="close-btn">&times;</button>
            </div>
            <div class="game-invitation-body">
                <div class="inviter-info">
                    <img :src="gameInvitation.photo" alt="邀请人头像" class="inviter-avatar" />
                    <p>
                        <strong>{{ gameInvitation.username }}</strong> 邀请您一起游戏
                    </p>
                </div>
                <div class="invitation-actions">
                    <button @click="acceptGameInvitation" class="accept-btn">接受</button>
                    <button @click="rejectGameInvitation" class="reject-btn">拒绝</button>
                </div>
                <div class="invitation-timer">
                    <div class="timer-bar" :style="{ width: `${timerProgress}%` }"></div>
                    <span>{{ timerSeconds }}秒后自动添加到消息列表</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import {
    MagicStick,
    Trophy,
    User,
    UserFilled,
    VideoPlay,
    Connection,
    Setting,
    Message,
    Star,
} from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import router from '@/router'
import RankingListView from '@/views/user/ranklist/RankingListView.vue'
import OnlineUsersView from '@/views/me/chat/OnlineUsersView.vue'
import { useUserStore } from '@/store/user'
import { useGameStore } from '@/store/game'
import axios from 'axios'
const userStore = useUserStore()
const gameStore = useGameStore()
const pendingRequestsCount = ref(false)

const activeButton = ref(null) // 当前激活的按钮ID
// 新增状态
const unreadMessages = ref([])
const showMessagePopup = ref(false)

// 游戏邀请相关状态
const showGameInvitation = ref(false)
const gameInvitation = ref({})
const timerSeconds = ref(10)
const timerProgress = ref(100)
let invitationTimer = null

// 在setup作用域中添加时间格式化函数
const formatTime = (timestamp) => {
    return new Date(timestamp).toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit',
    })
}
// 按钮配置
const buttons = [
    { id: 1, icon: VideoPlay, label: '狂暴模式' },
    { id: 2, icon: Connection, label: '联机模式' },
    { id: 3, icon: UserFilled, label: '好友列表' },
    { id: 4, icon: Setting, label: '游戏设置' },
]

const handleModeChange = (modeId) => {
    activeButton.value = modeId
    if (modeId === 1) {
        // 跳转到单人模式页面
        router.push('/main/singlepk/pk/')
    } else if (modeId === 2) {
        // 跳转到联机模式页面
        router.push('/main/multipk/')
    } else if (modeId === 3) {
        // 跳转到好友列表页面
        router.push('/main/friends/')
    } else if (modeId === 4) {
        // 跳转到游戏设置页面
        router.push('/setting/')
    }
}
// 初始化WebSocket连接
const initWebSocket = () => {
    // 确保token存在
    if (!userStore.token) {
        console.error('WebSocket连接失败: token不存在')
        setTimeout(() => initWebSocket(), 1000) // 1秒后重试
        return
    }

    // 如果已经有socket连接，则直接返回
    if (userStore.socket && userStore.socket.readyState === WebSocket.OPEN) {
        console.log('MainView: 使用已存在的WebSocket连接')
        return
    }

    try {
        console.log('MainView: 初始化WebSocket连接')
        const socket = new WebSocket(`wss://www.xujiaojiaojiao.cn/websocket/${userStore.token}`)
        userStore.socket = socket

        socket.onopen = () => {
            console.log('WebSocket连接已建立')
            // 连接建立后立即请求在线用户列表
            socket.send(JSON.stringify({ event: 'ping' }))
        }

        socket.onerror = (error) => {
            console.error('WebSocket连接错误:', error)
        }

        socket.onclose = () => {
            console.log('WebSocket连接已关闭')
            // 清除全局socket
            if (userStore.socket === socket) {
                userStore.socket = null
            }
            // 尝试重新连接
            setTimeout(() => initWebSocket(), 3000)
        }

        socket.onmessage = (msg) => {
            try {
                const data = JSON.parse(msg.data)

                if (data.event === 'friend-request') {
                    // 收到好友申请，显示红点
                    pendingRequestsCount.value = true
                } else if (data.event === 'new-message') {
                    // 新增消息处理
                    unreadMessages.value.push({
                        from: data.from,
                        fromName: data.fromName,
                        content: data.content,
                        timestamp: data.timestamp,
                    })
                    ElNotification({
                        title: '新消息',
                        message: `${data.fromName}: ${data.content}`,
                        duration: 3000,
                        onClick: () => {
                            router.push({ name: 'chat', params: { userId: data.from } })
                        },
                    })
                } else if (data.event === 'game-invite') {
                    // 直接处理游戏邀请，不再检查当前路径
                    handleGameInvitation(data)
                } else if (data.event === 'online-users') {
                    userStore.updateOnlineUsers(data.users)
                } else if (data.event === 'game-invite-result') {
                    // 接收好友对游戏邀请的回应
                    if (data.response === 'accept') {
                        ElNotification({
                            title: '游戏邀请已接受',
                            message: `${data.fromUsername} 接受了您的游戏邀请`,
                            type: 'success',
                            duration: 3000,
                        })
                        // 如果不在游戏页面，引导过去
                        if (router.currentRoute.value.path !== '/main/multipk/') {
                            setTimeout(() => {
                                router.push('/main/multipk/')
                            }, 1500)
                        }
                    } else {
                        ElNotification({
                            title: '游戏邀请被拒绝',
                            message: `${data.fromUsername} 拒绝了您的游戏邀请`,
                            type: 'error',
                            duration: 3000,
                        })
                    }
                }
            } catch (e) {
                console.error('处理WebSocket消息时出错:', e)
            }
        }
    } catch (e) {
        console.error('初始化WebSocket连接时出错:', e)
        // 出错后重试
        setTimeout(() => initWebSocket(), 3000)
    }
}

// 处理游戏邀请
const handleGameInvitation = (data) => {
    console.log('处理游戏邀请, 数据:', data)

    // 设置邀请信息
    gameInvitation.value = {
        fromUserId: data.fromUserId,
        username: data.fromUsername,
        photo: data.fromUserPhoto,
    }

    console.log('设置邀请信息:', gameInvitation.value)

    // 显示邀请窗口
    showGameInvitation.value = true
    console.log('showGameInvitation设置后:', showGameInvitation.value)

    // 重置计时器
    resetInvitationTimer()

    // 强制刷新UI以显示弹窗
    setTimeout(() => {
        showGameInvitation.value = true
    }, 100)
}

// 重置邀请计时器
const resetInvitationTimer = () => {
    // 清除现有计时器
    if (invitationTimer) {
        clearInterval(invitationTimer)
        invitationTimer = null
    }

    // 重置计时器状态
    timerSeconds.value = 10
    timerProgress.value = 100

    // 启动新计时器
    invitationTimer = setInterval(() => {
        timerSeconds.value--
        timerProgress.value = (timerSeconds.value / 10) * 100

        if (timerSeconds.value <= 0) {
            // 时间到，自动添加到消息列表
            addInvitationToMessages()
            closeGameInvitation()
        }
    }, 1000)
}

// 将邀请添加到消息列表
const addInvitationToMessages = () => {
    unreadMessages.value.push({
        from: gameInvitation.value.fromUserId,
        fromName: gameInvitation.value.username,
        content: `邀请您一起游戏`,
        timestamp: Date.now(),
    })

    ElNotification({
        title: '游戏邀请',
        message: `${gameInvitation.value.username} 邀请您一起游戏`,
        duration: 5000,
        onClick: () => {
            router.push('/main/multipk/')
        },
    })
}

// 接受游戏邀请
const acceptGameInvitation = () => {
    // 使用全局WebSocket实例（需在store中维护）
    if (userStore.socket) {
        userStore.socket.send(
            JSON.stringify({
                event: 'game-invite-result',
                toUserId: gameInvitation.value.fromUserId,
                response: 'accept',
            })
        )
    }

    closeGameInvitation()
    if (router.currentRoute.value.path === '/main/multipk/') {
        gameStore.showInvitation = false
    }
    router.push('/main/multipk/')
}

// 拒绝游戏邀请
const rejectGameInvitation = () => {
    if (userStore.socket) {
        userStore.socket.send(
            JSON.stringify({
                event: 'game-invite-result',
                toUserId: gameInvitation.value.fromUserId,
                response: 'reject',
            })
        )
    }

    // 关闭邀请窗口
    closeGameInvitation()
}

// 关闭游戏邀请窗口
const closeGameInvitation = () => {
    showGameInvitation.value = false

    // 清除计时器
    if (invitationTimer) {
        clearInterval(invitationTimer)
        invitationTimer = null
    }
}

// 点击消息图标
const handleMessageClick = () => {
    showMessagePopup.value = !showMessagePopup.value
}

// 加载好友列表
const loadFriendList = async (retry = 0) => {
    if (retry > 3) return // 最多重试3次

    try {
        console.log('尝试加载好友列表, 重试次数:', retry)
        const response = await axios.get('https://www.xujiaojiaojiao.cn/api/friend/list/', {
            params: {
                pageNum: 1,
                pageSize: 10,
                _t: Date.now(),
            },
            headers: {
                Authorization: `Bearer ${userStore.token}`,
            },
            timeout: 5000,
        })

        if (response.data.code === 1) {
            userStore.updateFriends(response.data.data.records)
            console.log('好友列表加载成功:', response.data.data.records)
        } else {
            console.error('好友列表加载失败:', response.data)
            setTimeout(() => loadFriendList(retry + 1), 2000)
        }
    } catch (error) {
        console.error('好友列表请求失败:', error)
        setTimeout(() => loadFriendList(retry + 1), 2000)
    }
}

// 检查未读请求
const checkUnreadRequests = async (retry = 0) => {
    if (retry > 3) return // 最多重试3次

    try {
        console.log('尝试检查未读好友请求, 重试次数:', retry)
        const response = await axios.get(
            'https://www.xujiaojiaojiao.cn/api/friend/requests/pending/',
            {
                headers: {
                    Authorization: `Bearer ${userStore.token}`,
                },
                timeout: 5000, // 设置超时
            }
        )

        if (response.data.code === 1) {
            pendingRequestsCount.value = response.data.data.length > 0
            userStore.updatePendingRequests(response.data.data)
            console.log('未读请求检查成功:', response.data.data)
        } else {
            console.error('未读请求检查失败:', response.data)
            setTimeout(() => checkUnreadRequests(retry + 1), 2000)
        }
    } catch (error) {
        console.error('获取好友请求失败:', error)
        setTimeout(() => checkUnreadRequests(retry + 1), 2000)
    }
}

onMounted(() => {
    console.log('MainView组件已挂载')

    // 先确认token是否存在
    if (!userStore.token) {
        console.error('Token不存在，可能未登录')
        ElNotification({
            title: '连接错误',
            message: '您可能未登录或登录已过期，请重新登录',
            type: 'error',
            duration: 5000,
        })
        router.push('/auth/')
        return
    }

    // 初始化WebSocket连接
    initWebSocket()

    // 加载各项数据
    loadFriendList()
    checkUnreadRequests()
})

onBeforeUnmount(() => {
    // 组件卸载前清除计时器
    if (invitationTimer) {
        clearInterval(invitationTimer)
        invitationTimer = null
    }
})
</script>

<style scoped lang="scss">
/* 基础动画定义 */
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0.9);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {
    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 8px rgba(0, 255, 135, 0.3));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(0, 255, 135, 0.6));
    }
}

@keyframes borderFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* 消息弹窗样式升级 */
.message-popup {
    position: fixed;
    right: 2rem;
    top: 6rem;
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid #00ff87;
    border-radius: 12px;
    padding: 1.5rem;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 255, 135, 0.2);
    backdrop-filter: blur(10px);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-item {
    padding: 1rem;
    margin-bottom: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 2px solid #00ff87;
    position: relative;
    overflow: hidden;
}

.message-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.1), transparent);
    transition: 0.5s;
}

.message-item:hover {
    background: rgba(0, 255, 135, 0.1);
    transform: translateX(5px);
}

.message-item:hover::before {
    left: 100%;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.from-name {
    color: #00ff87;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 255, 135, 0.5);
}

.message-time {
    color: #888;
    font-size: 0.8rem;
}

.message-content {
    color: #e0e0e0;
    font-size: 0.9rem;
}

.message-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.7);
    animation: pulse 1.5s infinite;
}

/* 主容器样式升级 */
.dashboard-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
    background: #0a0a0a;
    color: white;
    overflow: hidden;
    position: relative;
}

.dashboard-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 10%, rgba(40, 40, 50, 0.8) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(30, 30, 40, 0.8) 0%, transparent 30%);
    z-index: 0;
}

/* 左侧控制面板 */
.control-panel {
    background: rgba(15, 15, 20, 0.7);
    padding: 2rem;
    border-right: 1px solid rgba(0, 255, 135, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.control-panel::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 135, 0.1) 0%, transparent 70%);
    z-index: -1;
}

.control-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #00ff87, transparent);
    opacity: 0.6;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.5), transparent);
}

.logo h1 {
    margin: 0;
    font-weight: 600;
    font-size: 1.8rem;
    background: linear-gradient(45deg, #00ff87, #00b8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    animation: glow 3s infinite;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1rem;
    flex: 1;
}

.menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.2rem 1.5rem;
    border: none;
    border-radius: 12px;
    background: rgba(25, 25, 35, 0.6);
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #00ff87;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.menu-btn .el-icon {
    transition: all 0.3s ease;
}

.menu-btn:hover {
    background: rgba(0, 255, 135, 0.15);
    transform: translateX(8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.menu-btn:hover::before {
    transform: scaleY(1);
}

.menu-btn:hover .el-icon {
    transform: scale(1.2);
}

.menu-btn.active {
    background: linear-gradient(90deg, rgba(0, 255, 135, 0.2), rgba(0, 184, 255, 0.2));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-left: 2px solid #00ff87;
}

.menu-btn.active::before {
    transform: scaleY(1);
    opacity: 1;
}

.menu-btn.active .el-icon {
    color: #00ff87;
    filter: drop-shadow(0 0 6px rgba(0, 255, 135, 0.7));
}

.menu-btn .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.7);
    animation: pulse 1.5s infinite;
}

/* 用户个人卡片样式 */
.user-profile-card {
    margin-top: 2rem;
    margin-bottom: 3rem;
    background: rgba(20, 20, 30, 0.8);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(0, 255, 135, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.user-profile-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.05), transparent);
    transform: rotate(30deg);
    transition: 0.5s;
    z-index: 0;
}

.user-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 255, 135, 0.2);
    background: rgba(0, 255, 135, 0.1);
}

.user-profile-card:hover::before {
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: rotate(30deg) translateX(-100%);
    }
    100% {
        transform: rotate(30deg) translateX(100%);
    }
}

.user-avatar-container {
    position: relative;
    width: 50px;
    height: 50px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00ff87;
    box-shadow: 0 0 10px rgba(0, 255, 135, 0.4);
    transition: all 0.3s ease;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #00ff87;
    border-radius: 50%;
    border: 2px solid rgba(20, 20, 30, 0.8);
    box-shadow: 0 0 8px rgba(0, 255, 135, 0.7);
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    z-index: 1;
}

.username {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #00ff87;
    font-size: 0.9rem;
    margin-top: 4px;
}

.user-rating .el-icon {
    filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.7));
}

/* 右侧内容区优化 */
.content-wrapper {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    overflow: auto;
    position: relative;
    z-index: 1;
}

.content-wrapper::-webkit-scrollbar {
    width: 8px;
}

.content-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.content-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 135, 0.2);
    border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 135, 0.3);
}

.glass-card {
    border-radius: 16px;
    padding: 1.5rem;
    min-height: 400px; /* 降低最小高度，避免溢出 */
    height: calc(100vh - 5rem); /* 使卡片高度自适应 */
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    background: rgba(20, 20, 25, 0.7);
    border: 1px solid rgba(0, 255, 135, 0.15);
    backdrop-filter: blur(12px);
    position: relative;
    transition: all 0.3s ease;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ff87, #00b8ff, #00ff87);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.5;
}

.glass-card::-webkit-scrollbar {
    width: 6px;
}

.glass-card::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 16px 16px 0;
}

.glass-card::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 135, 0.2);
    border-radius: 3px;
}

.message-icon {
    color: #00ff87;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    position: relative;
}

.message-icon:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px #00ff87);
}

/* 标题样式优化 */
.board-title {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.5rem;
    color: #00ff87 !important;
    text-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 255, 135, 0.2);
    position: relative;
}

.board-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #00ff87;
    box-shadow: 0 0 10px #00ff87;
}

.board-title .el-icon {
    filter: drop-shadow(0 0 8px #00ff87);
}

/* 响应式布局优化 */
@media (max-width: 1400px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .glass-card {
        min-height: auto;
        height: calc(100vh - 8rem); /* 调整高度 */
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .control-panel {
        display: none;
    }

    .content-wrapper {
        padding: 1rem;
    }
}

/* 游戏邀请弹窗样式 */
.game-invitation-popup {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
    transition: opacity 0.3s ease;
}

.game-invitation-content {
    width: 90%;
    max-width: 400px;
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95) 0%, rgba(15, 15, 15, 0.95) 100%);
    border-radius: 15px;
    border: 1px solid rgba(0, 255, 135, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 135, 0.3);
    overflow: hidden;
    animation: pulse 2s infinite;
}

.game-invitation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 255, 135, 0.3);
}

.game-invitation-header h3 {
    color: #00ff87;
    margin: 0;
}

.game-invitation-body {
    padding: 1.5rem;
    text-align: center;
}

.inviter-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.inviter-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00ff87;
}

.inviter-info p {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.invitation-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.invitation-timer {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
}

.timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #00ff87, #00b8ff);
    transition: width 1s linear;
}

.invitation-timer span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    z-index: 1;
}

.accept-btn,
.reject-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.accept-btn {
    background: #28a745;
    color: white;
}

.accept-btn:hover {
    background: #218838;
    transform: scale(1.05);
}

.reject-btn {
    background: #dc3545;
    color: white;
}

.reject-btn:hover {
    background: #bd2130;
    transform: scale(1.05);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 135, 0.7);
    }
    100% {
        box-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
    }
}
</style>
